<template>
  <div class="box">
    <div class="keyTop">
      <div class="keyList d_f">
        <p
          :class="{ active: data.frequency == item.value }"
          v-for="item in times"
          :key="item.value"
          @click="tapSearch(item.value)"
        >
          {{ item.name }}
        </p>
        <p
          :class="{ active: data.frequency == 'timeSharing' }"
          @click="timeSharing('timeSharing')"
        >
          分时图
        </p>
      </div>
      <!-- code name -->
      <div class="titleTop">{{ title }}</div>
    </div>
    <!-- O, C, L, H -->
    <!-- label -->
    <div class="oclh">
      <span>O:{{ oclh.o || 0 }}</span>
      <span>C:{{ oclh.c || 0 }}</span>
      <span>L:{{ oclh.l || 0 }}</span>
      <span>H:{{ oclh.h || 0 }}</span>
    </div>
    <div id="Kline" v-if="data.show"></div>
    <!-- 海底捞月 -->
    <div class="seaMoon" v-if="data.show">海底捞月(抄底专用)</div>
    <!-- MACD/VOL -->
    <div class="MACD" v-if="data.show">
      <el-select
        class="select"
        v-model="data.selected"
        placeholder="Select"
        size="small"
        @change="changeVal"
      >
        <el-option key="vol" label="VOL" value="vol" />
        <el-option key="MACD" label="MACD" value="MACD" />
      </el-select>
      <!-- label -->
      <div class="macda">
        <span>DIF:{{ takeDecimal(macda.dif, 4) || 0 }}</span>
        <span>DEA:{{ takeDecimal(macda.dea, 4) || 0 }}</span>
        <span>MACD:{{ takeDecimal(macda.hist, 4) || 0 }}</span>
      </div>
    </div>
  </div>
  <!-- 屏幕绘制 -->
  <DrawingBoard />
</template>

<script setup>
import DrawingBoard from "@/components/DrawingBoard";
import { ElMessageBox } from "element-plus";
import { defaultApi } from "@/servers";
import { creatKline, OCLH, MACDA } from "./kline";
import { takeDecimal } from "@/utils/base.js";
import {
  computed,
  nextTick,
  onMounted,
  ref,
  watch,
  reactive,
  onUnmounted,
  toRefs,
} from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
const store = useStore();
const route = useRoute();
const title = ref("");
const keyList = ref([]);
const data = reactive({
  frequency: "d",
  code: null,
  duration: null, //时长
  times: null, //定时器
  show: false, //动态展示
  selected: "MACD", //切换vol/macd
  Kline: null, //echrts
});

// 屏幕响应式
const screenSize = computed(() => store.getters.system.screenWidth);
const times = computed(() => store.getters.system.times);
const oclh = ref({});
const macda = ref({});
onMounted(async () => {
  setInterval(() => {
    oclh.value = OCLH;
    macda.value = MACDA;
  }, 100);
});
let type = computed(() => store.getters.system.type);
let code = computed(() => {
  return store.getters.system.code;
});
let market = computed(() => {
  return store.getters.system.market;
});
let mc = computed(() => {
  return {
    market: market.value,
    code: code.value,
  };
});

onMounted(() => {
  data.show = true;
  nextTick(() => {
    creatclkline();
    // 定时刷新
    reload();
  });
});
// watch(
//   mc,
//   (e) => {
//     if (!e) return;
//     data.show = true;
//     //初始化k线图
//     nextTick(() => {
//       data.code = e.code;
//       creatclkline();
//       // 定时刷新
//       reload();
//     });
//   },
//   {
//     immediate: true,
//   }
// );

function tapSearch(e) {
  data.frequency = e;
  nextTick(() => {
    creatclkline();
    // 定时刷新
    reload();
  });
}

async function creatclkline() {
  const { frequency } = data;
  let kDOM = document.getElementById("Kline");
  let result = await defaultApi.clkline({
    code: code.value,
    frequency,
    market: market.value,
  });
  console.log(result);

  title.value = result.title;
  data.Kline = creatKline(kDOM, result);
}

// 定时刷新
function reload() {
  // const { code, frequency } = data;
  // 出现卡顿！
  // let times = null;

  // switch (frequency) {
  //   case "1m":
  //     times = 60000;
  //     break;
  //   case "5m":
  //     times = 300000;
  //     break;
  //   case "15m":
  //     times = 900000;
  //     break;
  //   case "30m":
  //     times = 1800000;
  //     break;
  //   case "60m":
  //     times = 3600000;
  //     break;
  // }
  // if(!times) return;
  // 定时刷新
  if (data.times) {
    clearInterval(data.times);
    data.times = null;
  }
  data.times = setInterval(() => {
    creatclkline();
  }, 300000);
}
// 切换
function changeVal(e) {
  data.Kline.then((data) => {
    data.tapSelect(e);
  });
}
function timeSharing(e) {
  data.frequency = e;

  rtData();
  if (data.times) {
    clearInterval(data.times);
    data.times = null;
  }
  // 分时刷新
  data.times = setInterval(() => {
    rtData();
  }, 60000);
}
// 分时数据
async function rtData() {
  const { code } = data;

  let kDOM = document.getElementById("Kline");
  let result = await defaultApi.rtData({
    code,
    market: market.value,
  });
  console.log(result);
  data.Kline = creatKline(kDOM, result);
}
onUnmounted(() => {
  // 清除定时器
  clearInterval(data.times);
  data.times = null;
  data.show = false;
});
</script>


<style scoped lang="scss">
.box {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#Kline {
  width: 100%;
  flex: 1;
}
.keyTop {
  width: 50%;
  color: #b9b8ce;

  position: absolute;
  top: 5px;
  left: 0;
  z-index: 1;
  .keyList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    p {
      margin-right: 10px;
      padding: 0 5px 10px;
      &.active {
        font-weight: bolder;
        color: #409eff;
      }
    }
  }
  .titleTop {
    font-weight: bold;
  }
}

.oclh {
  position: absolute;
  top: 40px;
  right: 20%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
  transform: translateY(-50%);
  color: #b9b8ce;
  padding: 5px 10px;
  margin: 10px 0;
  font-weight: bold;
  font-size: 10px;
  pointer-events: none;
  span {
    margin-right: 10px;
  }
}
.seaMoon,
.MACD {
  position: absolute;
  z-index: 1;
  left: 3%;
  transform: translateY(-50%);
  color: #b9b8ce;

  font-weight: bold;
  display: flex;
  align-items: center;
}
.seaMoon {
  top: 67%;
  font-size: 14px;
}
.MACD {
  top: 80%;
  font-size: 12px;
  .select {
    width: 5%;
    min-width: 100px;
    transform: scale(0.9);
    ::v-deep .el-input__wrapper {
      background: transparent;
      box-shadow: none;
      .el-input__inner {
        color: #b9b8ce;
        font-weight: bold;
      }
    }
  }
  .macda {
    span {
      margin-right: 10px;
      &:nth-child(2) {
        color: #e0e107;
      }
      &:nth-child(3) {
        color: #b11066;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  #Kline {
    min-height: 700px;
  }
  .keyTop {
    width: 100%;

    position: relative;
    top: 0;
  }

  .oclh {
    position: relative;
    top: 0;
    right: 0;
    transform: none;
  }
}
</style>
 